<style type="text/css">
.ui-jqdialog select { max-width:230px; }
</style>
<table id="list" class="scroll"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>

<script type="text/javascript">
jQuery('#list').jqGrid({
	url:'/catalog/categorygroups/fields/format/json/cgid/<?php echo $this->cgid;?>',
	datatype: 'json',
	mtype: 'GET',
	colNames:['Id', 'Category', 'Group', 'Field', 'Sort Order', 'Filter Field'],
	colModel :[
	  {name:'GROUPFIELDS_ID', index:'GROUPFIELDS_ID', sorttype:'int', width:50},
	  {name:'CATEGORY_TITLE', index:'CATEGORY_TITLE', editable:false},
	  {name:'GROUP_TITLE', index:'GROUP_TITLE', editable:false},
	  {name:'GROUPFIELDS_FIELDID', index:'GROUPFIELDS_FIELDID', editable:true, editrules:{required:true}, edittype:'select', editoptions:{value:{<?php foreach ($this->fields as $id => $title) { echo "{$id}:'{$title}'"; if (end($this->fields) != $title) echo ',';}?>}}},
	  {name:'GROUPFIELDS_SORTORDER', index:'GROUPFIELDS_SORTORDER', editable:true},
	  {name:'GROUPFIELDS_INFILTER', index:'GROUPFIELDS_INFILTER', editable:true, edittype:'checkbox', editoptions: {value:"1:0"}}
	],
	pager: jQuery('#pager'),
	rowNum:20,
	rowList:[20, 40, 60, 80, 100, 150, 200],
	sortname: 'GROUPFIELDS_ID',
	sortorder: 'asc',
	viewrecords: true,
	caption: 'Group Firlds View',
	editurl: '/catalog/categorygroups/fieldsedit/cgid/<?php echo $this->cgid;?>',
	height:'auto',
	width:'auto'
}).navGrid('#pager',{
	edit:true, add:true, del:true, search:true
});
</script>
